
/*尽量少嵌套：避免性能问题和移植性问题*/

/*
 *使用Iconfont，字体文件代替图片文件展示图标
 *Iconfont的体积更小
 *Iconfont是矢量图，拉伸不变形，颜色可自行更换，支持CSS3对字体的修饰效果
 */
@font-face {
  font-family: 'icons-turn-arrow';
  src: url('../fonts/icons/turn-arrow.eot') format('enbedded'),
       url('../fonts/icons/turn-arrow.woff') format('woff'),
       url('../fonts/icons/turn-arrow.ttf') format('truetype'),
       url('../fonts/icons/turn-arrow.svg') format('svg');
}

/* Base Application Styles */
html,body {
  width: 100%;
  height: 100%;
  background: #222;
}

.app {
  width: 100%;
  height: 100%;
}

/* stage -- start */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
}
/* stage -- end */

/* image -- start */
.img-sec {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ddd;

  /* 添加景深，增强3D效果。
   * 当为元素设置perspective，子元素会获得透视效果，而不是元素本身
   */
  perspective: 1800px; 
}

.img-figure {
  position: absolute;
  width: 260px;
  height: 300px;
  margin: 0;
  padding: 30px;
  box-sizing: border-box; /* width包含padding\border */
  background-color: #fff;

  cursor: pointer;
 
  transform-origin: 0 50% 0;  /* 被转换元素的位置 3D的分别对应: x轴，y轴，z轴，默认是：50% 50% 0 */
  transform-style: preserve-3d;  /* 子元素将保留其3D位置 */
  transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out; /* transform、left、top分别应用过渡效果，0.6秒完成，慢速开始和结束 */
}

.img-figure img {
  width: 100%;
}

/* 图片翻转  -- start */
.img-figure.is-inverse {
  transform: translate(260px) rotateY(180deg);
}
/* 图片翻转  -- end */

figcaption{
  text-align: center;
}

figcaption .img-title{
  margin: 20px 0 0 0;
  color: #a7a0a2;
  font-size: 16px;
}

figcaption .img-back {
  position: absolute; /* 相对于img-sec进行定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 50px 40px;
  overflow: auto;
  color: #666;
  background: #fff;

  transform: rotateY(180deg) translateZ(1px);
  
}

/* image -- end */

/* controller -- start */
.controller-nav {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 101; /* 11的二次方 */
  width: 100%;
  text-align: center;

  transition: background-color 6s;
}

.controller-unit {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px;

  background-color: #aaa;
  border-radius: 50%;
  cursor: pointer;

  transform: scale(.5);
  transition: transform .6s ease-in-out, background-color .3s; /* 增加过渡效果 */

  vertical-align: middle;
}

.controller-unit.is-center {
  transform: scale(1);

  background-color: #888;
}

.controller-unit.is-center::after {
  font-family: 'icons-turn-arrow'; /* 引用字体文件 */
  content: '\e600'; /* 使用字体文件的Unicode码对字体进行引用 */
  font-size: 80%;

  line-height: 30px; /* 设置成和圆点一样的高度，使之垂直居中 */
  color: #fff;

  /*
   * 屏幕渲染机制：灰阶渲染（控制边缘亮度，所耗内存相对较低，应用于手机） 亚像素渲染（效果更好，所耗内存相对更高，应用于Mac等）
   * Mac上有些浅色字体图片（在上面设置了白色，可以设置为深色进行测试）在浏览器上显得较粗
   * 解决方案：修改浏览器的属性：
   */
  -webkit-font-smoothing: antialiased; /* 开启chrome在Mac下字体渲染的灰阶平滑 */
  -moz-osx-font-smoothing: grayscale; /* 开启firefox在Mac下字体渲染的灰阶平滑 */
}

.controller-unit.is-center.is-inverse {
  background-color:  #555;

  transform: rotateY(180deg); /* 翻转180度 */
}

/* controller -- end */
